<template>
  <div class="cropper-main">
    <div class="left-panel">
      <!-- <div class="Com_view"> -->
      <div class="box_cropper">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :infoTrue="option.infoTrue"
          :full="option.full"
          :auto-crop="option.autoCrop"
          @cropMoving="cropMoving"
          @imgLoad="imgLoad"
        >
        </vue-cropper>
      </div>
      <div class="box_btn">
        <el-button type="primary" plain @click="onClick">获取截图</el-button>
        <!-- <vue-cropper></vue-cropper> -->
      </div>
      <!-- </div> -->
    </div>
    <div class="right-panel">
      <div @click="toolHandler">rote</div>
      <!-- <CropperTool></CropperTool> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import "../components/sl-cropper/index.css";
const cropper = ref("");
const cropper_width = ref(0); // 真实的输出图片宽度
const cropper_height = ref(0); // 真实的输出图片高度

const option = reactive({
  img: new URL("@/assets/images/demo.jpg", import.meta.url).href, // 本地图片地址或网络地址
  autoCrop: true, // 是否开启截图框
  full: true, // 是否输出原图比例
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const imgLoad = (e) => {
  // console.log(e, "--load", cropper.value.getImgAxis());
  // console.log(cropper.value);
  // cropper.value.moveX = 100;
};
const cropMoving = (e) => {
  console.log(e, "--zz--");
};

const onClick = () => {
  cropper.value.getCropData(async (data) => {
    // 获取真实输出的图片宽高
    const img = new Image();
    img.onload = () => {
      cropper_width.value = img.width;
      cropper_height.value = img.height;
    };
    img.src = data;
    setTimeout(() => {
      preview(data);
    }, 300);
  });
};
const toolHandler = () => {
  cropper.value.rotateRightPosition(60);
};
const preview = (img) => {
  ElMessageBox.alert(
    `<img class="cropper_img" src="${img}"/>
      <div class="cropper_img_size">${cropper_width.value}x${cropper_height.value}</div>
    `,
    "截图成功",
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
    }
  );
};
</script>

<style lang="scss">
.cropper-main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  .left-panel {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .box_cropper {
      box-shadow: 0 3px 5px 1px #cfcfcf;
      border: 10px solid white;
      width: 400px;
      height: 400px;
    }
    .box_btn {
      margin-top: 20px;
    }
  }
  .right-panel {
    width: 450px;
    height: 100%;
    background: white;
  }
}

.cropper_img {
  width: 400px;
  height: 400px;
  object-fit: contain;
}
.cropper_img_size {
  text-align: center;
}
</style>
